<template>
<p>去门口有个仓储超市购买商品数量：{{ count }}</p>
<!--使用v-on绑定事件操作-->
<button v-on:click="count= count +1">
    点击数量加=1
</button>
<button v-on:click="addcount(5)">一次性购买5个</button>

<h2>{{ msg }}</h2>
<button @click="btn">翻转按钮</button>
<!--点击box盒子 更改颜色-->
<div class="box" @click="Onclick" :style="{background:bgcolor}">
{{ count }}
</div>


</template>
<script setup>
import { ref } from 'vue'
const count =ref(0)

let msg = ref("HELLO vue3")

const addcount = (num) => { 
count.value +=num
}
const btn = () => { 
    //把字符串转换为数组
    // console.log(msg.split('').reverse().join(''));
    msg.value = msg.value.split('').reverse().join('')
}

//点击更改背景颜色
const bgcolor = ref("#ff5454")
const Onclick = () => { 
    count.value++
    console.log();
    
    bgcolor.value = '#' + String(Math.random()).substring(2, 8)
}
</script>
<style scoped>
.box{
    width: 200px;
    height: 200px;

}
</style>